<template>
  <v-container v-if="storeList.length > 0" class="store-list">
    <div class="store">
      <div class="store-title">{{ $t('store') }}:</div>
      <div class="store-content">
        <v-chip-group v-model="activeStore" column @change="handleChange">
          <v-chip
            v-for="store in storeList"
            :key="store.id"
            mandatory
            active-class="red--text lighten-1"
            style="margin: 4px 8px 4px 0"
          >
            {{ store.name }}
          </v-chip>
        </v-chip-group>
      </div>
    </div>
  </v-container>
</template>

<script>
export default {
  name: 'SearchCar',
  props: {
    storeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeStore: ''
    };
  },
  // watch: {
  //   storeList: {
  //     handler(val) {
  //       if (val.length > 0) {
  //         this.activeStore = 0;
  //       }
  //     },
  //     immediate: true
  //   }
  // },
  methods: {
    handleChange(val) {
      this.$emit('change', this.storeList[val]);
    }
  }
};
</script>

<style scoped lang="scss">
.store-list {
  margin: 12px 0;
  padding: 0 12px;
  .store {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    .store-title {
      width: 100px;
      height: 48px;
      line-height: 48px;
      font-weight: bolder;
      font-size: 24px;
    }
    .store-content {
      flex: 1;
    }
    ::v-deep(.theme--light.v-chip:not(.v-chip--active)) {
      background-color: #eee;
    }
  }
}
@media screen and (max-width: 600px) {
  .store-list {
    .store {
      .store-title {
        width: 100%;
      }
    }
  }
}
</style>
